<template>
  <div class="content">
    <div class="header">
      <div class="search">
        <a-input
          v-model="state.searchKey"
          :style="{ width: '320px' }"
          placeholder="输入科室名称或分类搜索"
          allow-clear
          @clear="clearHandle"
        />
        <a-button
          type="primary"
          :loading="state.searchLoading"
          @click="searchHandle"
          >搜索</a-button
        >
      </div>
      <div class="btn">
        <a-button type="primary" @click="openModal">
          <template #icon>
            <icon-plus />
          </template>
          <template #default>新增</template>
        </a-button>
      </div>
    </div>
    <div class="table">
      <gridTable
        :columns="state.columns"
        :data="state.data"
        :action-func="actionhandle"
        :loading="state.searchLoading"
        :pagination="state.pagination"
        :page-change="pageChange"
      >
      </gridTable>
    </div>
    <!-- 弹出层 -->
    <a-modal
      v-model:visible="state.visible"
      width="300"
      :mask-closable="false"
      :title="state.isClassify ? '新增科室类别' : '新增科室'"
    >
      <div v-if="state.isClassify">
        <a-form :model="state.form">
          <a-form-item field="classify" label="科室分类">
            <a-input v-model="state.form.classify" placeholder="输入科室类别" />
          </a-form-item>
          <a-form-item field="name" label="科室名称">
            <a-select
              v-model="state.form.name"
              :style="{ width: '320px' }"
              placeholder="选择科室"
            >
              <a-option
                v-for="item of state.options"
                :value="item.name"
                :label="item.name"
                :key="item.id"
              />
            </a-select>
          </a-form-item>
        </a-form>
      </div>
      <div v-else>
        <a-input v-model="state.department" placeholder="输入科室名称" />
      </div>
      <template #footer>
        <div v-if="state.isClassify" class="foot">
          <a-button :style="{ marginRight: '10px' }" @click="Cancel"
            >上一步</a-button
          >
          <a-button type="primary" @click="onOK">提交</a-button>
        </div>
        <div v-else class="foot">
          <a-button :style="{ marginRight: '10px' }" @click="Cancel"
            >取消</a-button
          >
          <a-button type="primary" @click="onOK">下一步</a-button>
        </div>
      </template>
    </a-modal>
  </div>
</template>

<script setup lang="tsx">
import {
  Message,
  type TableColumnData,
  type TableData,
  type TableRowSelection,
} from "@arco-design/web-vue";
import gridTable from "@/components/table/gridTable.vue";
import { reactive } from "vue";
import { commonApi } from "@/api/index";

const renderImg = ({ column, record }) => {
  console.log(column.dataIndex);
  console.log(record[column.dataIndex]);
  return <div></div>;
};

const state = reactive({
  columns: [
    {
      title: "科室名称",
      dataIndex: "name",
    },
    {
      title: "科室分类",
      dataIndex: "classify",
    },
    {
      title: "操作",
      slotName: "optional",
      width: 100,
      action: [
        // {
        //   text: "详情",
        //   value: "detail",
        // },
        // {
        //   text: "修改",
        //   value: "revise",
        // },
        {
          text: "删除",
          value: "delete",
        },
      ],
    },
  ],
  data: [] as unknown as TableColumnData[],
  pagination: {
    current: 1,
    pageSize: 7,
    total: 0,
  },
  searchLoading: false,
  searchKey: "",
  department: "",
  fieldNames: { value: "id", label: "name" },
  options: [],
  visible: false,
  isClassify: false,
  form: {
    name: "",
    classify: "",
  },
});
// 分页
const pageChange = (page) => {
  // console.log(page);
  state.pagination.current = page;
};
// 搜索
const searchHandle = async () => {
  if (state.searchKey) {
    state.searchLoading = true;
    getdepartment("classify", state.searchKey);
  }
};
const clearHandle = async () => {
  getdepartment("classify", "");
};
// 打开Modal
const openModal = () => {
  state.visible = true;
};
// 取消/上一步
const Cancel = () => {
  if (state.isClassify) {
    //上一步
    state.isClassify = false;
  } else {
    //取消
    state.visible = false;
    state.department = "";
  }
};
// 下一步/提交
const onOK = () => {
  if (state.isClassify) {
    //提交
    commonApi
      .addClassify(state.form)
      .then((res) => {
        console.log(res);
        if (res.code === 200) {
          state.visible = false;
          state.isClassify = false;
          state.form.name = "";
          state.form.classify = "";
          getdepartment("classify", "");
        }
      })
      .catch((err) => {
        console.log(err);
        Message.error({
          content: err.msg || "error",
          position: "top",
        });
      });
  } else {
    //下一步
    if (state.department) {
      commonApi
        .addDepartment({ name: state.department })
        .then((res) => {
          console.log(res);
          if (res.code == 200) {
            state.isClassify = true;
            state.department = "";
            getdepartment("department", "");
          }
        })
        .catch((err) => {
          console.log(err);
          Message.error({
            content: err.msg || "error",
            position: "top",
          });
        });
    } else {
      state.isClassify = true;
      state.department = "";
      getdepartment("department", "");
    }
  }
};
// 操作
const actionhandle = (key, data) => {
  console.log(key, data);
  switch (key) {
    case "detail":
      console.log(data);
      Message.info({
        content: "开发中",
        position: "top",
      });
      break;
    case "revise":
      console.log(data);
      Message.info({
        content: "开发中",
        position: "top",
      });
      break;
    case "delete":
      console.log(data);
      deleteInfo(data.id);
      break;
  }
};
// 删除
const deleteInfo = (classifyId) => {
  commonApi
    .deleteData({ classifyId })
    .then((res) => {
      console.log(res);
      if (res.code === 200) {
        Message.success({
          content: res.msg || "删除成功",
          position: "top",
        });
        getdepartment("classify", "");
      } else {
        Message.error({
          content: res.msg || "error",
          position: "top",
        });
      }
    })
    .catch((err) => {
      console.log(err);
    });
};
// 获取科室数据
const getdepartment = (key, searchKey) => {
  commonApi
    .getDepartment({ key, searchKey })
    .then((res) => {
      // console.log(res);
      if (res.code === 200) {
        if (key === "classify") {
          state.data = res.data?.result;
          state.pagination.total = res.data?.result.length;
        } else if (key === "department") {
          state.options = res.data?.result;
        }
      } else {
        console.log(res.msg);
      }
      state.searchLoading = false;
    })
    .catch((err) => {
      console.log(err);
    });
};
getdepartment("classify", "");
</script>
<style lang="less" scoped>
.content {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  //   display: flex;
  //   align-items: center;
  //   justify-content: center;
}
.table {
  width: 100%;
  height: 100%;
}
.header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .search {
    width: 100%;
    padding: 20px 0;
  }
}
.foot {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: end;
}
</style>
